<template>
  <div class="containet">
    <div class="app-containet">
      <el-page-header content="车辆详情" @back="goBack" />
      <el-card class="box-card">
        <el-tabs>
          <el-tab-pane label="用户管理" name="基本信息" @click="goBack" />
          <el-tab-pane label="配置管理" name="行驶证信息" />
        </el-tabs>
        <el-form :model="formData">
          <el-descriptions>
            <el-descriptions-item label="车辆编号">{{ formData.id }}</el-descriptions-item>
            <el-descriptions-item label="车牌号码">{{ formData.licensePlate }}</el-descriptions-item>
            <el-descriptions-item label="车型名称">{{ formData.truckTypeName }}</el-descriptions-item>
            <el-descriptions-item label="车辆体积"> {{ formData.allowableLoad }} m³ </el-descriptions-item>
            <el-descriptions-item label="车辆载重">{{ formData.allowableVolume }}吨</el-descriptions-item>
            <el-descriptions-item label="GPSID">{{ formData.deviceGpsId }}</el-descriptions-item>
            <el-descriptions-item label="图片信息">
              <span class="tt">
                <div class="demo-image__preview">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :preview-src-list="srcList"
                  />
                </div>
              </span>
              <span>
                <div class="demo-image__preview">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="url"
                    :preview-src-list="srcList"
                  />
                </div>
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </el-card>
      <el-card class="box-cardd">
        <el-button type="danger" @click="obj">编辑信息</el-button>
      </el-card>
    </div>
  </div>
</template>
<script>
import { particulars } from '@/api/Example '
export default {
  name: 'Employee',
  data() {
    return {
      url: 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png',
      srcList: [
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png',
        'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/slwl/db52da05-5136-46e7-9c1a-4c2a9e61754a.png'
      ],
      formData: {}
    }
  },
  created() {
    this.particulars()
  },
  methods: {
    goBack() {
      this.$router.push('/warning')
    },
    async  particulars(id) {
      const res = await particulars(this.$route.params.id)
      console.log(res)
      this.formData = res.data.data
    },
    obj() {
      this.$router.push('/compile/:id?')
    }
  }
}
</script>
<style scoped>
.box-cardd{
     width: 1300px;
    margin: 10px auto;
    text-align: center;
}
.box-card{
    width: 1300px;
    height: 500px;
    margin: 10px auto;
}
.tt{
    margin-right: 30px;
}
</style>
